Animate navigation bar visibility - #414
Merged
Merged
Conversation
There are three kinds of changes here. 1. We have to plumb the `visibilityAnimation` through a preference so `Navigation.swift` can access it. 2. Adding in `AnimatedVisibility`. (This changes indentation on the whole file. Best viewed ignoring whitespace, e.g. with `git diff -w`) 3. Careful coordination of `contentSafeArea` with `topPadding`. These need to match each other on every frame of the animation, or the animation will judder.
Member
Author
|
I tried also adding animation support for the tab bar and the "bottom bar" toolbar, but it turned out to be a lot harder than just animating the top bar. I may pick it up again some day. For future work: I suspect that we no longer need to separately track |
5 tasks
Member
Author
|
Updated with videos |
Will be needed by skiptools#419
Member
|
Very nice improvement, thanks! |
7 tasks
vincentborko
added a commit
to vincentborko/skip-ui
that referenced
this pull request
Jun 1, 2026
skiptools#414 (Animate navigation bar visibility) moved the "reset top-bar inset to 0 when hidden" into a DisposableEffect.onDispose *inside* AnimatedVisibility(visible: showTopBar). AnimatedVisibility with visible=false never composes its content, so for a title-less root (showTopBar == false from the start) that onDispose never runs — leaving topBarBottomPx at its initial safeArea + 112dp and pushing content down by a phantom top inset. Initialize the inset to 0 when showTopBar is false, and add a LaunchedEffect(showTopBar) that clears it on any visible→hidden transition. The 112dp anti-flash init is preserved for bars that are actually shown. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This was referenced Jun 1, 2026
marcprux
pushed a commit
that referenced
this pull request
Jun 1, 2026
#452) #414 (Animate navigation bar visibility) moved the "reset top-bar inset to 0 when hidden" into a DisposableEffect.onDispose *inside* AnimatedVisibility(visible: showTopBar). AnimatedVisibility with visible=false never composes its content, so for a title-less root (showTopBar == false from the start) that onDispose never runs — leaving topBarBottomPx at its initial safeArea + 112dp and pushing content down by a phantom top inset. Initialize the inset to 0 when showTopBar is false, and add a LaunchedEffect(showTopBar) that clears it on any visible→hidden transition. The 112dp anti-flash init is preserved for bars that are actually shown. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
There are three kinds of changes here.
visibilityAnimationthrough a preference soNavigation.swiftcan access it.AnimatedVisibility. (This changes indentation on the whole file. Best viewed ignoring whitespace, e.g. withgit diff -w)contentSafeAreawithtopPadding. These need to match each other on every frame of the animation, or the animation will judder.Videos
Videos
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-05-07.at.16.41.04.mov
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-05-07.at.16.42.00.mov
Screen_recording_20260507_164120.webm
Screen_recording_20260507_164143.webm
Skip Pull Request Checklist:
swift testNone required
Example of animating navigation bar visibility skipapp-showcase#97
Cursor added in
AnimatedVisibility; I wrote the code to coordinatecontentSafeAreaandtopPadding, and tested it in Showcase Lite, in skiptools/skipapp-showcase#97 in both the "Geometry Padding" and "Geometry padding in sheet" playgrounds.